<template>
  <div>
    <!-- 公共属性 -->
    <el-form
      label-width="80px"
      :model="activeElement"
      size="mini"
      class="kr-form"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="宽度">
            <el-input-number
              v-model="activeElement.width"
              controls-position="right"
              :min="1"
              class="min-input"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="高度">
            <el-input-number
              v-model="activeElement.height"
              controls-position="right"
              :min="1"
              class="min-input"
            ></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="横坐标">
            <el-input-number
              v-model="activeElement.left"
              controls-position="right"
              :min="0"
              class="min-input"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纵坐标">
            <el-input-number
              v-model="activeElement.top"
              controls-position="right"
              :min="0"
              class="min-input"
            ></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="字号">
            <el-input-number
              :disabled="activeElement.style.FontSize === undefined"
              v-model="activeElement.style.FontSize"
              controls-position="right"
              :min="0"
              class="min-input"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="加粗">
            <el-switch
              :disabled="activeElement.style.Bold === undefined"
              v-model="activeElement.style.Bold"
              :active-value="true"
              :inactive-value="false"
            ></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="字体颜色">
            <input
              type="color"
              v-model="activeElement.style.FontColor"
              :disabled="activeElement.style.FontColor === undefined"
            />
            <!-- <el-color-picker :disabled="activeElement.style.FontColor === undefined"
              v-model="activeElement.style.FontColor"></el-color-picker> -->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="边框颜色">
            <input
              type="color"
              v-model="activeElement.style.BorderColor"
              :disabled="activeElement.style.BorderColor === undefined"
            />
            <!-- <el-color-picker :disabled="activeElement.style.BorderColor === undefined"
              v-model="activeElement.style.BorderColor"></el-color-picker> -->
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="标题背景">
            <input
              type="color"
              v-model="activeElement.style.titleColor"
              :disabled="activeElement.style.titleColor === undefined"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="activeElement.style.ShowBarText !== undefined">
          <el-form-item label="条码值">
            <el-switch
              :disabled="activeElement.style.ShowBarText === undefined"
              v-model="activeElement.style.ShowBarText"
              :active-value="true"
              :inactive-value="false"
            ></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="对齐方式">
          <el-radio-group
            :disabled="activeElement.style.Alignment === undefined"
            v-model="activeElement.style.Alignment"
          >
            <el-radio :label="'left'">左对齐</el-radio>
            <el-radio :label="'center'">居中</el-radio>
            <el-radio :label="'right'">右对齐</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="12" v-if="activeElement.style.codeType !== undefined">
          <el-form-item label="条码类型">
            <el-select
              :disabled="activeElement.style.codeType === undefined"
              v-model="activeElement.style.codeType"
              class="min-input"
            >
              <el-option
                v-for="val in codeTypeArray"
                :key="val"
                :label="val"
                :value="val"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="activeElement.style.ItemType !== undefined">
          <el-form-item label="打印类型">
            <el-select
              :disabled="activeElement.style.ItemType === undefined"
              v-model="activeElement.style.ItemType"
              class="min-input"
            >
              <el-option
                v-for="val in itemTypeArray"
                :key="val.value"
                :label="val.label"
                :value="val.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="高度自动">
            <el-switch
              :disabled="activeElement.style.AutoHeight === undefined"
              v-model="activeElement.style.AutoHeight"
              :active-value="true"
              :inactive-value="false"
            ></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="边框">
            <el-switch
              :disabled="activeElement.style.border === undefined"
              v-model="activeElement.style.border"
              :active-value="true"
              :inactive-value="false"
            ></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="下边距">
            <el-input-number
              :disabled="
                activeElement.style.BottomMargin === undefined ||
                  !activeElement.style.AutoHeight
              "
              v-model="activeElement.style.BottomMargin"
              controls-position="right"
              :min="0"
              class="min-input"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="activeElement.type == 'braid-table'">
          <div
            style="display: flex;justify-content: space-between;cursor:pointer;"
          >
            <el-form-item label="表格属性"> </el-form-item>
            <div style="color:#409EFF;margin-right: 20px;" @click="editTable">
              修改表格
            </div>
          </div>
          <el-form-item
            v-for="(item, index) in activeElement.columns"
            :key="index"
          >
            <div style="display: flex;border-top: 1px dashed #409EFF;">
              <el-input
                placeholder="表头名称"
                suffix-icon="el-icon-edit"
                v-model="item.title"
                style="width: 120px;margin-right: 10px;margin-top: 10px;"
              >
              </el-input>
              <el-input-number
                v-model="item.width"
                placeholder="列宽%"
                controls-position="right"
                :min="0"
                :max="100"
                style="width: 120px;margin-right: 10px;margin-top: 10px;"
              ></el-input-number>
            </div>
            <div style="display: flex;margin-top: 10px;">
              <el-switch
                inactive-text="分页合计"
                v-model="item.amount"
                style="margin-right: 20px;"
              ></el-switch>
              <el-switch
                inactive-text="是否大写"
                :disabled="!item.amount"
                v-model="item.capitalization"
              ></el-switch>
            </div>
          </el-form-item>
          <el-form-item label="表格行高">
            <el-input-number
              v-model="activeElement.style.linHeight"
              placeholder="行高px"
              controls-position="right"
              :min="0"
            ></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <tableEdit ref="tableEdit" @ok="tableChange"></tableEdit>
  </div>
</template>
<script>
import { getCodeTypeArray, getItemTypeArray } from "../../libs/props.js";
import tableEdit from "./options/tableEdit.vue";
export default {
  components: { tableEdit },
  data() {
    return {
      codeTypeArray: getCodeTypeArray(),
      itemTypeArray: getItemTypeArray()
    };
  },
  computed: {
    activeElement() {
      console.log(this.$vptd.state.activeElement, "66");
      return this.$vptd.state.activeElement;
    },
    // 页面高度
    height() {
      return this.$vptd.state.page.height;
    }
  },
  methods: {
    tableChange(e, item) {
      let selectCol = [];
      item.selectCol.forEach(itemName => {
        let colInfo = item.columnsAttr.find(col => col.name === itemName);
        if (colInfo) {
          selectCol.push(colInfo);
        }
      });
      item.columns = selectCol; //表格显示的字段
      console.log(item.columns, "item.columnsitem.columns");
      this.$vptd.dispatch("addTempItem", item);
    },
    editTable() {
      // this.$refs
      this.$refs.tableEdit.isShow(this.$vptd.state.activeElement);
      console.log(this.$vptd.state.activeElement, "564564");
    }
  }
};
</script>
<style lang="scss" scoped>
.mini-form {
  ::v-deep.el-form-item--mini.el-form-item {
    margin-bottom: 10px;
  }
}
</style>
